<script setup>
import { reactive,ref } from 'vue'
import { Form, Field, CellGroup,Button,Checkbox,Toast } from 'vant';
import { useRouter,useRoute } from 'vue-router'
import axios from 'axios';
import http from '@/http'
const kaMi = ref('')
const checked = ref(false)
const router = useRouter()
const route = useRoute()
const qs = require('qs');
console.log(route.query);
const loading = ref(false)
if(localStorage.getItem('shop')){
    router.push('/')
}
const onSubmit = async (values) => {
    if(!checked.value)return Toast('请先勾选同意协议')
    if(values){
        try {
            loading.value = true;
            const res = await axios({
               url:'https://www.diandianyouke.cn:8081/api/findShopByDesc',
               data:qs.stringify({desc:kaMi.value}),
               headers:{
                'Content-Type':'application/x-www-form-urlencoded'
               },
               timeout:7000,
               method:'post'
            })
            if(res.data.data){
                console.log(res);
                localStorage.setItem('shop',JSON.stringify(res.data.data));
                // global.WEB_PARAMS.storeId = JSON.parse(localStorage.getItem('shop')).shopDescription
                const res1 = await axios({
                   url:'https://www.diandianyouke.cn:8081/automanager/saveStore',
                   data:{
                        storeId:res.data.data.shopId,
                        storeAccount:res.data.data.shopDescription,
                        storeName:res.data.data.shopName,
                        storeHy:res.data.data.shopCate2Obj.shopCate2Name,
                        storeCity:res.data.data.urbanarea,
                    },
                   timeout:7000,
                   method:'post'
                })
                // const res1 = await http.post('/saveStore',)
                loading.value = false;
                router.push(route.query.redirect || '/')
                Toast('登录成功')
            }else{
                loading.value = false;
                Toast ('卡密错误')
            }
        } catch (error) {
            console.log(error);
            loading.value = false;
            Toast('登陆超时,请稍后再试')
        }
    }
}
</script>

<template>
    <div class="page">
        <div class="box">
            <Form @submit="onSubmit">
                <CellGroup inset>
                  <Field
                    class="box-input"
                    v-model="kaMi"
                    name="卡密"
                    placeholder="请输入卡密"
                    :rules="[{ required: true, message: '请填写卡密' }]"
                  />
                </CellGroup>
                <Checkbox class="check" v-model="checked" checked-color="#8E54F4" icon-size="5vw"><span>我已同意<text class="text">《用户协议》</text>和<text class="text">《隐私协议》</text></span></Checkbox>
                <div style="margin: 3vw;">
                  <Button :loading="loading" loading-text="加载中..." class="btn" round block type="primary" native-type="submit">
                    确定
                  </Button>
                </div>
            </Form>
        </div>
    </div>
</template>

<style scoped>
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(245,247,250);
    }
    .box{
        width: 94vw;
        height: 80vw;
        background-color: rgb(255,255,255);
        padding: 5vw;
        padding-top: 20vw;
        box-sizing: border-box;  
    }
        .box-img{
                display: block;
                width: 18vw;
                height: 18vw;
                border-radius: 2vw;
                margin: 0 auto 6vw;
            }
            .btn{
                height: 13vw;
                width: 77vw;
                background-color: rgb(142,84,244);
                border: none;
                font-size: 4.27vw;
                color: #fff;
            }
    .check{
            font-size: 3.2vw;
            color: rgb(144,147,153);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 6vw;
        }
    .check span{
        color: rgb(144,147,153);
    }
    .text{
            color: rgb(142,84,244);
        }
    *{
      user-select: none;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
    }
    input {
      -webkit-user-select:auto; /*webkit浏览器*/
    }
    .box-input{
        background-color: #f5f7fa;
    }
</style>